<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜品详情</title>
    <link rel="stylesheet" href="css/dish_detail.css">

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <!-- 头部标题 -->
        <div class="head" >
            <h2>下订单</h2>
        </div>
         <!-- 菜品详情 -->
        <div class="detail">

            <!-- 菜品详情信息 -->
            <div class="dish">
                <img :src="dish.dishImg">
                <span class="dish_name"> {{dish.dishName}} </span>
                <span class="dish_price">￥{{dish.dishPrice}} </span>
            </div>

            <!-- 选择优惠券 -->
            <div class="coupons">
                <span>可选择优惠券</span>
                <select    >
                    <option >--请选择优惠券--</option>
                    <option  >
                       
                    </option>
                </select>
                <button class="save-order-btn" >下订单</button>
            </div>

        </div>

    </div>

<script>
    const vm = new Vue({

        el:"#app",

        data:{
            dish:{
                dishId:"",
                dishName:"",
                dishImg:"",
                dishPrice:""
            }

        },

        mounted(){
            this.getDishById()

        },

        methods:{
            getDishById(){
                var url = new URL(window.location.href);
                var dishId = url.searchParams.get("id");

                axios.get("dish/"+dishId)
                    .then(response=>{
                        console.log(response.data)
                        this.dish = response.data;
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        }

    })
</script>
   
</body>
</html>